<template>
    <div
        class="customerInfoChange"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="客户资料查询修改">
            <template slot="cardBody">
                <div class="formContainer">
                    <!-- 客户基本资料 -->
                    <el-form
                        class="searchForm exclusiveStyle"
                        ref="searchForms"
                        :model="searchForm"
                        :rules="rules"
                        :inline="true"
                        label-position="right"
                        size="small"
                        label-width="100px"
                        v-loading="isLoading"
                    >
                        <p
                            class="title"
                            style="margin-left:30px;padding-top:10px;padding-bottom:10px;color:#1b1c1d;font-weight:bold;"
                        >客户基本资料</p>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="NATION" label="国籍:">
                                    <el-select
                                        placeholder
                                        disabled
                                        v-model.trim="searchForm.NATION"
                                        clearable
                                    >
                                        <el-option
                                            v-for="item in NATIONTYPE"
                                            :key="item.code"
                                            :label="item.label"
                                            :value="item.code"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="MARRIED" label="婚姻状态:">
                                    <el-select
                                        placeholder
                                        disabled
                                        v-model.trim="searchForm.MARRIED"
                                        clearable
                                    >
                                        <el-option
                                            v-for="item in MARRIEDTYPE"
                                            :key="item.code"
                                            :label="item.label"
                                            :value="item.code"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="IDDTE" label="证件有效期:">
                                    <el-input
                                        placeholder
                                        disabled
                                        v-model.trim="searchForm.IDDTE"
                                        name="IDDTE"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="MOBILEPHONE" label="手机号码:">
                                    <el-input
                                        placeholder
                                        v-model.trim="searchForm.MOBILEPHONE"
                                        name="MOBILEPHONE"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="E-mail地址:">
                                    <el-input placeholder v-model.trim="searchForm.EMAIL"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="FAXNO" label="传真机号码:">
                                    <el-input
                                        placeholder
                                        v-model.trim="searchForm.FAXNO"
                                        name="FAXNO"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="HOMEPHONE" label="家庭电话:">
                                    <el-input
                                        placeholder
                                        v-model.trim="searchForm.HOMEPHONE"
                                        name="HOMEPHONE"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="BUSIPHONE" label="公司电话:">
                                    <el-input
                                        placeholder
                                        size="small"
                                        v-model.trim="searchForm.BUSIPHONE"
                                        name="BUSIPHONE"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="BUSIEXT" label="分机:">
                                    <el-input
                                        placeholder
                                        v-model.trim="searchForm.BUSIEXT"
                                        name="BUSIEXT"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="BUSINAME" label="公司名称:">
                                    <el-input
                                        placeholder
                                        v-model.trim="searchForm.BUSINAME"
                                        name="BUSINAME"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="DEPT" label="公司部门:">
                                    <el-input
                                        placeholder
                                        v-model.trim="searchForm.DEPT"
                                        name="DEPT"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="JOBPOSIT" label="职务:">
                                    <el-select
                                        placeholder
                                        v-model.trim="searchForm.JOBPOSIT"
                                        clearable
                                        disabled
                                    >
                                        <el-option
                                            v-for="item in JOBPOSITTYPE"
                                            :key="item.code"
                                            :label="item.label"
                                            :value="item.code"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="EDUCATION" label="教育程度:">
                                    <el-select
                                        placeholder
                                        v-model.trim="searchForm.EDUCATION"
                                        clearable
                                        disabled
                                    >
                                        <el-option
                                            v-for="item in EDUCATIONTYPE"
                                            :key="item.code"
                                            :label="item.label"
                                            :value="item.code"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="successMessage" v-if="ifupdate3002">
                            <span
                                :class="{'success_class':isShowClass1,'error_class':!isShowClass1}"
                            >{{resultdesc3002}}</span>
                        </div>
                        <div style="text-align:center;    margin: 10px auto;">
                            <el-button
                                type="primary"
                                size="small"
                                @click="updateCustInfo(1)"
                            >客户基本资料修改</el-button>
                        </div>
                    </el-form>
                    <!-- 客户地址资料 -->
                    <el-form
                        class="addressForm searchForm"
                        ref="addressForm"
                        :model="formData"
                        :rules="rules"
                        label-position="right"
                        size="small"
                        label-width="90px"
                    >
                        <p
                            class="title"
                            style="margin-left:30px;padding-top:10px;padding-bottom:10px;color:#1b1c1d;font-weight:bold;"
                        >客户地址资料</p>
                        <!-- <el-form-item
                            label="账单地址类型:"
                            label-width="120px"
                            label-position="left"
                            prop="STSMAIL"
                        >
                            <div class="form-radio">
                                <el-radio-group v-model="formData.STSMAIL">
                                    <el-radio label="H">家庭地址</el-radio>
                                    <el-radio label="B">公司地址</el-radio>
                                </el-radio-group>
                            </div>
                        </el-form-item>-->
                        <div class="addressInfo">
                            <!-- 家庭地址 -->
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <el-radio-group v-model="formData.STSMAIL">
                                        <el-radio label="H">家庭地址</el-radio>
                                    </el-radio-group>
                                </div>
                                <div class="info">
                                    <!-- <el-form-item label="所在地:" label-position="left">
                                        <div class="form-radio">
                                            <el-radio-group v-model="formData.AD1OS">
                                                <el-radio :label="'0'">国内</el-radio>
                                                <el-radio :label="'1'">国外</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-form-item>-->
                                    <el-form-item label="邮政编码:" label-position="left">
                                        <el-input
                                            v-model.trim="formData.POSTCODE1"
                                            placeholder
                                            name="POSTCODE1"
                                        ></el-input>
                                    </el-form-item>

                                    <el-form-item label="地址区段1:" label-position="left" prop="ADD11">
                                        <el-input
                                            v-if="formData.AD1OS =='1'"
                                            v-model="formData.ADD11"
                                            placeholder="请输入省份"
                                        ></el-input>
                                        <el-select
                                            v-else
                                            v-model="formData.ADD11"
                                            placeholder="请选择省份"
                                            @change="getCityAddress($event,1)"
                                            value-key="pro_name"
                                            filterable
                                            allow-create
                                        >
                                            <el-option
                                                v-for="item in addRessAlls"
                                                :label="item.pro_name"
                                                :value="item"
                                                :key="item.pro_name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地址区段2:" label-position="left" prop="ADD12">
                                        <el-input
                                            v-if="formData.AD1OS =='1'"
                                            v-model="formData.ADD12"
                                            placeholder="请输入市"
                                        ></el-input>
                                        <el-select
                                            v-else
                                            v-model="formData.ADD12"
                                            placeholder="请选择市"
                                            @change="getCityAddressFun($event,1)"
                                            value-key="city_name"
                                            filterable
                                            allow-create
                                        >
                                            <el-option
                                                v-for="item in CITYAddRESSADD11"
                                                :label="item.city_name"
                                                :value="item"
                                                :key="item.city_name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地址区段3:" label-position="left">
                                        <el-input
                                            v-if="formData.AD1OS =='1'"
                                            v-model="formData.ADD13"
                                            placeholder="请输入市"
                                        ></el-input>
                                        <el-select
                                            v-else
                                            v-model="formData.ADD13"
                                            placeholder="请选择市"
                                            filterable
                                            allow-create
                                            default-first-option
                                        >
                                            <el-option
                                                v-for="item in CITYAddRESSADD12"
                                                :label="item.area_name"
                                                :value="item.area_name"
                                                :key="item.area_name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地址区段4:" label-position="left" prop="ADD14">
                                        <el-input v-model="formData.ADD14"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址区段5:" label-position="left" prop="ADD15">
                                        <el-input v-model="formData.ADD15"></el-input>
                                    </el-form-item>
                                </div>
                            </el-card>

                            <!-- 公司地址 -->
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <el-radio-group v-model="formData.STSMAIL">
                                        <el-radio label="B">公司地址</el-radio>
                                    </el-radio-group>
                                </div>
                                <div class="info">
                                    <!-- <el-form-item label="所在地:" label-position="left">
                                        <div class="form-radio">
                                            <el-radio-group v-model="formData.AD2OS">
                                                <el-radio :label="'0'">国内</el-radio>
                                                <el-radio :label="'1'">国外</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-form-item>-->
                                    <el-form-item label="邮政编码:" label-position="left">
                                        <el-input v-model="formData.POSTCODE2"></el-input>
                                    </el-form-item>

                                    <el-form-item label="地址区段1:" label-position="left" prop="ADD21">
                                        <el-input
                                            v-if="formData.AD2OS =='1'"
                                            v-model="formData.ADD21"
                                            placeholder="请输入省份"
                                        ></el-input>
                                        <el-select
                                            v-else
                                            v-model="formData.ADD21"
                                            placeholder="请选择省份"
                                            @change="getCityAddress($event,2)"
                                            value-key="pro_name"
                                            filterable
                                            allow-create
                                        >
                                            <el-option
                                                v-for="item in addRessAlls"
                                                :label="item.pro_name"
                                                :value="item"
                                                :key="item.pro_name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地址区段2:" label-position="left" prop="ADD22">
                                        <el-input
                                            v-if="formData.AD2OS =='1'"
                                            v-model="formData.ADD22"
                                            placeholder="请输入市"
                                        ></el-input>
                                        <el-select
                                            v-else
                                            v-model="formData.ADD22"
                                            placeholder="请选择市"
                                            @change="getCityAddressFun($event,2)"
                                            value-key="city_name"
                                            filterable
                                            allow-create
                                        >
                                            <el-option
                                                v-for="item in CITYAddRESSADD21"
                                                :label="item.city_name"
                                                :value="item"
                                                :key="item.city_name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地址区段3:" label-position="left">
                                        <el-input
                                            v-if="formData.AD2OS =='1'"
                                            v-model="formData.ADD23"
                                            placeholder="请输入市"
                                        ></el-input>
                                        <el-select
                                            v-else
                                            v-model="formData.ADD23"
                                            placeholder="请选择市"
                                            filterable
                                            allow-create
                                            default-first-option
                                        >
                                            <el-option
                                                v-for="item in CITYAddRESSADD22"
                                                :label="item.area_name"
                                                :value="item.area_name"
                                                :key="item.area_name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地址区段4:" label-position="left" prop="ADD24">
                                        <el-input v-model="formData.ADD24"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址区段5:" label-position="left" prop="ADD25">
                                        <el-input v-model="formData.ADD25"></el-input>
                                    </el-form-item>
                                </div>
                            </el-card>
                        </div>
                        <div class="successMessage" v-if="ifupdate3003">
                            <span
                                :class="{'success_class':isShowClass2,'error_class':!isShowClass2}"
                            >{{resultdesc3003}}</span>
                        </div>
                    </el-form>

                    <!-- 话术 -->
                    <div class="hstable_wrap" v-if="speechList.length!=0">
                        <el-table
                            :data="speechList"
                            border
                            stripe
                            header-row-class-name="headerRow"
                            ref="showListTable"
                            class="heard-bg business_table hstable"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                            <el-table-column label="业务话术">
                                <template slot-scope="scope">{{scope.row.content}}</template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div class="btnBox">
                        <el-button
                            type="primary"
                            size="small"
                            :loading="searchLoading"
                            @click="linkman"
                        >联系人查询及修改</el-button>
                        <el-button type="primary" size="small" @click="reservationPromation">预留问题修改</el-button>
                        <el-button type="primary" size="small" @click="updateCustInfo(2)">客户地址资料修改</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            v-if="isShowBtm"
                            @click="handleClickbtn"
                        >修改记录查询</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
        <el-dialog
            v-drag
            title="预留问题修改"
            :visible.sync="centerDialogVisible"
            width="600px"
            :append-to-body="true"
            top="25vh"
            :close-on-click-modal="false"
            center
        >
            <el-form ref="model3029s" :model="model3029" :rules="rules2" label-width="110px">
                <el-row>
                    <el-col :span="24">
                        <div class="text_center width30">
                            <el-form-item prop="PMPTQU" label="预留问题:">
                                <el-input placeholder v-model.trim="model3029.PMPTQU"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="text_center width30">
                            <el-form-item prop="PMPTAN" label="预留答案:">
                                <el-input placeholder v-model.trim="model3029.PMPTAN"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="centerDialogVisible = false"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handerCardReissue"
                    icon="el-icon-circle-check"
                    v-preventReClick
                >确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { RegConfig } from '@/utils/RegConfig';
import { getDictSelectList, getDictMappingValue, getBusinessMenuId } from '@/utils/Common';
// import { CITYAddRESS1, CITYAddRESS2, CITYAddRESS3, RELEASECAUSE } from '@/utils/Contants';
import { addRessAll } from '@/utils/address';

export default {
    name: 'customerInfoChange',
    components: {
        cardComponent,
    },
    data() {
        const validatorPass = (rule, value, callback) => {
            value = value.trim();
            console.log("this.customerInfo_3002", this.customerInfo_3002.BUSINAME);
            if (this.customerInfo_3002.BUSINAME.trim() !== '' && value === '') {
                callback(new Error('公司名称不能修改为空，请重新输入!'));
            } else {
                callback();
            }

            if (value.length > 15) {
                callback(new Error('单位名称不能超过15个字，请重新输入!'));
            } else {
                callback();
            }
        };
        const validatorFax = (rule, value, callback) => {
            value = value.trim();
            console.log("this.customerInfo_3002", this.customerInfo_3002.FAXNO);
            if (this.customerInfo_3002.FAXNO.trim() !== '' && value === '') {
                callback(new Error('传真号码不能修改为空，请重新输入!'));
            } else {
                callback();
            }
        };
        const validatorHP = (rule, value, callback) => {
            value = value.trim();
            console.log("this.customerInfo_3002", this.customerInfo_3002.HOMEPHONE);
            if (this.customerInfo_3002.HOMEPHONE.trim() !== '' && value === '') {
                callback(new Error('家庭电话不能修改为空，请重新输入!'));
            } else {
                callback();
            }
        };
        const validatorBP = (rule, value, callback) => {
            value = value.trim();
            console.log("this.customerInfo_3002", this.customerInfo_3002.BUSIPHONE);
            if (this.customerInfo_3002.BUSIPHONE.trim() !== '' && value === '') {
                callback(new Error('公司电话不能修改为空，请重新输入!'));
            } else {
                callback();
            }
        };
        const validatorBE = (rule, value, callback) => {
            value = value.trim();
            console.log("this.customerInfo_3002", this.customerInfo_3002.BUSIEXT);
            if (this.customerInfo_3002.BUSIEXT.trim() !== '' && value === '') {
                callback(new Error('公司分机不能修改为空，请重新输入!'));
            } else {
                callback();
            }
        };
        const validatorDEPT = (rule, value, callback) => {
            value = value.trim();
            console.log("this.customerInfo_3002", this.customerInfo_3002.DEPT);
            if (this.customerInfo_3002.DEPT.trim() !== '' && value === '') {
                callback(new Error('公司部门不能修改为空，请重新输入!'));
            } else {
                callback();
            }
        };
        return {
            addRessAlls: [],
            pageLoading: false,
            centerDialogVisible: false,
            currentPage: 1, // 当前分页
            pageSize: 10, // 每页数量
            total: 0, // 数据总数
            searchLoading: false, // 查询按钮loading
            resetLoading: false, // 重置按钮loading
            NATIONTYPE: '', // 国籍类型
            EDUCATIONTYPE: [], // 教育程度数据字典
            MARRIEDTYPE: [], // 婚姻状态数据字典
            JOBPOSITTYPE: [], // 职务分类数据字典JOBPOSITTYPE
            isShowBtm: false,//修改记录查询 按钮是否显示
            GENDERTYPE: [
                {
                    code: 'M',
                    label: '男',
                },
                {
                    code: 'F',
                    label: '女',
                },
            ], // 性别
            searchForm: { // 表单字段
                CARDNO: '', // 卡号
                HOMEPHONE: '', // 家庭电话
                MOBILEPHONE: '', // 手机号码
                EMAIL: '', // EMAIL地址
                FAXNO: '', // 传真机号码
                BUSIPHONE: '', // 公司电话
                BUSIEXT: '', // 公司电话分机
                DEPT: '', // 部门
                BUSINAME: '', // 单位名称
                GENDER: '', // 性别
                MARRIED: '', // 婚姻状态，
                EDUCATION: '', // 教育程度
                CLASS_CODE: '', // 客户类别
                CATEGORY: ''//账户类型

            },
            // 客户地址信息表单
            formData: {
                STSMAIL: '', // 账单地址标志

                // 家庭地址
                POSTCODE1: '', // 地址1邮政编码
                ADD1TYPE: 'H', // 地址1类型 H-家庭
                AD1ST: '', // 地址1省市简称
                AD1OS: '', // 地址1国内/国外标志 0-国内，1-国外；其他值非法
                ADD11: '', //
                ADD12: '', //
                ADD13: '', //
                ADD14: '', //
                ADD15: '', //

                // 公司地址
                POSTCODE2: '', //
                ADD2TYPE: 'B', // B-公司
                AD2ST: '', //
                AD2OS: '', //
                ADD21: '', //
                ADD22: '', //
                ADD23: '', //
                ADD24: '', //
                ADD25: '', //

            },
            // CITYAddRESS1: '',//城市地址
            CITYAddRESSADD11: '',
            CITYAddRESSADD21: '',
            CITYAddRESSADD12: '',
            CITYAddRESSADD22: '',

            model3029: {
                PMPTQU: '', // 预留问题
                PMPTAN: '', // 预留答案
            },
            OPTION: 1, // 请求状态,
            OPTION3029: 1,
            isLoading: false,
            CATEGORY_filter: '',
            rules: {
                HOMEPHONE: [
                    { pattern: /^[0-9\-\ ]+$/, message: '请输入数字或-或空格', trigger: 'blur' },
                    { validator: validatorHP, trigger: 'blur' }
                ],
                MOBILEPHONE: [
                    { required: true, message: '手机号码不能为空！', trigger: 'blur' },
                    { pattern: RegConfig.mobile2, message: '请输入正确的手机号码', trigger: 'blur' },
                ],
                FAXNO: [
                    { pattern: /^[0-9\-\ ]+$/, message: '请输入数字或-或空格', trigger: 'blur' },
                    { validator: validatorFax, trigger: 'blur' }
                ],
                BUSIPHONE: [
                    { pattern: /^[0-9\-\ ]+$/, message: '请输入数字或-或空格', trigger: 'blur' },
                    { validator: validatorBP, trigger: 'blur' }
                ],
                BUSINAME: [{ validator: validatorPass, trigger: 'blur' }],
                DEPT: [{ validator: validatorDEPT, trigger: 'blur' }],
                BUSIEXT: [
                    { pattern: /^[0-9\-\ ]+$/, message: '请输入数字或-或空格', trigger: 'blur' },
                    { validator: validatorBE, trigger: 'blur' }
                ],
                EMAIL: [
                    { required: true, message: 'E-mail不能为空！', trigger: 'blur' },
                    { pattern: RegConfig.email, message: 'E-mail格式不正确！', trigger: 'blur' }
                ],
                POSTCODE1: [
                    { required: true, message: '邮政编码不能为空！', trigger: 'blur' },
                    { pattern: /^[1-9]\d{5}$/, message: '请输入正确的6位数字', trigger: 'blur' },
                ],
                POSTCODE2: [
                    { required: true, message: '邮政编码不能为空！', trigger: 'blur' },
                    { pattern: /^[1-9]\d{5}$/, message: '请输入正确的6位数字', trigger: 'blur' },
                ],
                ADD11: [{ required: true, message: '家庭地址1不能为空！', trigger: 'change' }], //
                ADD12: [{ required: true, message: '家庭地址2不能为空！', trigger: 'change' }], //
                ADD21: [{ required: true, message: '公司地址1不能为空！', trigger: 'change' }], //
                ADD22: [{ required: true, message: '公司地址2不能为空！', trigger: 'change' }], //
                ADD14: [{ max: 20, message: '字符最大长度为20', trigger: 'change' },],
                ADD15: [{ max: 20, message: '字符最大长度为20', trigger: 'change' },],
                ADD24: [{ max: 20, message: '字符最大长度为20', trigger: 'change' },],
                ADD25: [{ max: 20, message: '字符最大长度为20', trigger: 'change' },],
            },
            rules2: {
                PMPTQU: [{ required: true, message: '预留问题不能为空！', trigger: 'change' }],
                PMPTAN: [{ required: true, message: '预留答案不能为空！', trigger: 'change' }],
            },
            speechList: [],//话术列表
            selectedList: [],
            ifupdate3002: false,//是否已完成更新
            ifupdate3003: false,//是否已完成更新
            resultdesc3002: '',
            resultdesc3003: '',
            ifhasreserv: false,//是否原先未设置过预留问题和答案
            MenuId: '',
            isShowClass1: true,
            isShowClass2: true,
        };
    },

    async created() {
        this.isLoading = true;
        this.NATIONTYPE = await getDictSelectList('NATION', this);
        this.EDUCATIONTYPE = await getDictSelectList('EDUCATION', this);
        this.MARRIEDTYPE = await getDictSelectList('MARRIED', this);
        this.JOBPOSITTYPE = await getDictSelectList('JOBPOSIT', this);

        // 查询客户预留问题答案
        this.trans3029();

    },
    async mounted() {
        this.MenuId = this.$route.params.id || '';
        // 查询地址信息 3003 
        await this.handleDealTrans(1);
        // this.CITYAddRESS1 = CITYAddRESS1;
        this.addRessAlls = addRessAll;
        console.log('this.city', this.city);
        await this.getspeechList();
        await this.getInitData(1);
        await this.getDictFun();
        // 第一次页面进入 初始给下拉选项赋值
        this.getCityInitSelectFun();
        // console.log('地址数据输出', this.addRessAlls);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        customerInfo_3002: state => state.common.customerInfo_3002,
        defaultParams: state => state.common.defaultParams,
        pinFlag: state => state.common.pinFlag,
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
        businessMenu: state => state.menu.businessMenu,
        currentSessionObj: state => state.common.currentSessionObj,
        checAllData: state => state.common.checAllData,
    }),
    methods: {
        async getDictFun() {
            console.log(' this.cardInfo_3004.CARDNO', this.cardInfo_3004.CARDNO);
            this.searchForm.CARDNO = this.cardInfo_3004.CARDNO.trim() || ''; // 卡号
            console.log(' this.searchForm.CARDNO ', this.searchForm.CARDNO);
            console.log(' this.cardInfo_3004.CATEGORY', this.cardInfo_3004.CATEGORY);
            this.CATEGORY_filter = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY + '', this);
            console.log('this.CATEGORY_filter', this.CATEGORY_filter);

        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            console.log("this.MenuId", this.MenuId);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 查询，修改预留问题
        trans3029() {
            const appBody = {
                KEYTYPE: this.customerInfo_3002.KEYTYPE,
                CUSTNBR: this.customerInfo_3002.CUSTID || '', // 证件号
                OPTION: this.OPTION3029, // 1:查询 2：修改 3：新增 4：删除
                PINFLAG: this.pinFlag, // 是否检查密码标志
                PMPTQU: this.model3029.PMPTQU,
                PMPTAN: this.model3029.PMPTAN,

            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3029';
            defaultParams.body.appBody = appBody;

            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result);
                    if (result.sysHead.rspCd === '000000') {
                        console.log('trans3029;', result.body.appBody);
                        this.model3029.PMPTQU = result.body.appBody.PMPTQU.trim();
                        this.model3029.PMPTAN = result.body.appBody.PMPTAN.trim();
                        if (this.model3029.PMPTQU === '' && this.model3029.PMPTAN === '') {
                            this.ifhasreserv = true;
                        } else {
                            this.ifhasreserv = false;
                        }
                        if (this.OPTION3029 != '1') {
                            this.isShowBtm = true;
                            this.$alert('交易成功！', '提示', {
                                customClass: 'success', type: 'success',
                            });
                            this.centerDialogVisible = false;
                            this.getInitData(1);
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

        async updateCustInfo(optionType) {
            if (this.selectedList.length != this.speechList.length) {
                this.$alert('话术尚未全部勾选！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            if (optionType === 1) {
                // 客户基本资料修改
                this.$refs.searchForms.validate((valid) => {
                    if (valid) {
                        this.$confirm('确定修改客户基本资料?', '提示', { customClass: 'warning', type: 'warning' }).then(async () => {

                            await this.getInitData(2);
                        });
                    }
                })

            } else {
                // 客户地址资料修改
                this.$refs.addressForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确定客户地址资料?', '提示', { customClass: 'warning', type: 'warning' }).then(async () => {
                            await this.handleDealTrans(optionType);
                        });
                    }
                })
            }
        },
        // 3003 交易
        async handleDealTrans(optionType) {
            this.pageLoading = true;
            let appBody;
            if (optionType === 1) { //  做查询操作
                appBody = {
                    CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                    INQOPT: 1,
                    KEYTYPE: this.customerInfo_3002.KEYTYPE,
                    CUSTID: this.customerInfo_3002.CUSTID,
                    OPTION: optionType,
                    PINFLAG: this.pinFlag,
                };
            } else { // 做修改操作
                // if (!this.checkAddress()) {
                //     this.pageLoading = false;
                //     return;
                // }
                appBody = {
                    ...this.formData,
                    CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                    INQOPT: 1,
                    KEYTYPE: this.customerInfo_3002.KEYTYPE,
                    CUSTID: this.customerInfo_3002.CUSTID,
                    OPTION: optionType,
                    PINFLAG: this.pinFlag,
                };
            }
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '3003';
            params.body.appBody = appBody;

            // 跑 3003 交易
            await this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 请求成功
                    const result3003 = JSON.parse(res.data.jsonRes);

                    if (result3003.sysHead.rspCd === '000000') { // 交易成功
                        const data = result3003.body.appBody;
                        console.log(result3003, 'result -- 3003');
                        // 表单赋值
                        for (const key in this.formData) {
                            if (typeof data[key] == 'string') {
                                this.formData[key] = data[key].trim();
                            } else {
                                this.formData[key] = data[key];
                            }
                        }
                        console.log(this.formData, 'this.formData');
                        if (optionType === 2) {
                            this.ifupdate3003 = true;
                            this.isShowBtm = true;
                            // 更新缓存客户地址信息
                            this.$store.commit('common/UPDATE_CUS_ADDR_INFO', data);
                            // 删除缓存组件 -> 客户地址信息查询页面
                            const componentNameList = ['customerIfoChange', 'pretroCustomerInfo', 'customerInfo'];
                            this.$store.commit('tagsView/DELETE_CACHE_VIEWS_ITEM', componentNameList);
                            this.isShowClass2 = true;
                            this.resultdesc3003 = "客户地址资料修改成功！";
                        }
                    }
                    else { // 交易失败
                        if (optionType === 2) {
                            this.ifupdate3003 = true;
                            this.isShowClass2 = false;
                            this.resultdesc3003 = `客户地址资料修改失败，错误代码：${result3003.sysHead.rspCd}，错误信息：${result3003.sysHead.rspMsg} `;
                        }
                    }
                }
                else { // 请求失败
                    if (optionType === 2) {
                        this.ifupdate3003 = true;
                        this.isShowClass2 = false;
                        this.resultdesc3003 = "客户地址资料修改失败，请求失败";
                    }
                }
            });
        },

        // 地址校验
        checkAddress() {
            const { formData } = this;
            let flag = false;
            if (!formData.ADD11.trim() || !formData.ADD12.trim()) {
                this.$alert('家庭地址中的行1,行2不能为空', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else if (!formData.ADD21.trim() || !formData.ADD22.trim()) {
                this.$alert('公司地址中的行1,行2不能为空', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else {
                flag = true;
            }
            return flag;
        },


        // 获取初始化列表数据
        async getInitData(OPTIONS) {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPTION: OPTIONS, // 1:查询 2：修改 3：按位图修改 4：新增（仅北京银行）按手机号码方式查询时，只能查询不能修改，也不能按位图修改
                INQOPT: 1, // 查询方式 // 1-按卡号查询 2-按张建查询 3-按手机号码查询             //业务报文
                PINFLAG: this.pinFlag, // 是否检查密码标志
                HOMEPHONE: this.searchForm.HOMEPHONE, // 家庭电话
                MOBILEPHONE: this.searchForm.MOBILEPHONE, // 手机号码
                EMAIL: this.searchForm.EMAIL, // EMAIL地址
                FAXNO: this.searchForm.FAXNO, // 传真机号码
                BUSIPHONE: this.searchForm.BUSIPHONE, // 公司电话
                BUSIEXT: this.searchForm.BUSIEXT, // 公司电话分机
                DEPT: this.searchForm.DEPT, // 部门
                BUSINAME: this.searchForm.BUSINAME, // 单位名称
                GENDER: this.searchForm.GENDER, // 性别
                MARRIED: this.searchForm.MARRIED, // 婚姻状态，
                EDUCATION: this.searchForm.EDUCATION, // 教育程度
                CLASS_CODE: this.searchForm.CLASS_CODE, // 客户类别
                JOBPOSIT: this.searchForm.JOBPOSIT,//职务
                // 
                // RESIDEYES: this.customerInfo_3002.RESIDEYES,//居住年数
                // RESIDESTS: this.customerInfo_3002.RESIDESTS,//住房情况 '6', //
                // TECTITLE: this.customerInfo_3002.TECTITLE,//职务  '14',//
                // TRADE: this.customerInfo_3002.TRADE,//行业类别代码  'A006',//
                // BUSITYPE: this.customerInfo_3002.BUSITYPE,//行业性质  '07',// 
                // JOBYES: this.customerInfo_3002.JOBYES,//公司服务年数
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3002';
            defaultParams.body.appBody = appBody;
            // 3002交易
            await this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    this.isLoading = false;
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        console.log('trans3002交易', result.body.appBody);
                        this.searchForm = {
                            HOMEPHONE: result.body.appBody.HOMEPHONE.trim(),
                            MOBILEPHONE: result.body.appBody.MOBILEPHONE.trim(),
                            EMAIL: result.body.appBody.EMAIL.trim(),
                            FAXNO: result.body.appBody.FAXNO.trim(),
                            BUSIPHONE: result.body.appBody.BUSIPHONE.trim(),
                            BUSIEXT: result.body.appBody.BUSIEXT.trim(),
                            DEPT: result.body.appBody.DEPT.trim(),
                            BUSINAME: result.body.appBody.BUSINAME.trim(),
                            GENDER: result.body.appBody.GENDER.trim(),
                            MARRIED: result.body.appBody.MARRIED.trim(),
                            EDUCATION: result.body.appBody.EDUCATION.trim(),
                            // CLASS_CODE: result.body.appBody.CLASS_CODE,
                            ENGNAME: result.body.appBody.ENGNAME.trim(),
                            // BIRTHDAY: result.body.appBody.BIRTHDAY,
                            IDDTE: result.body.appBody.IDDTE,//
                            HOMEPHONE: result.body.appBody.HOMEPHONE.trim(),
                            JOBPOSIT: result.body.appBody.JOBPOSIT.trim(),
                            NATION: result.body.appBody.NATION.trim(),
                            CARDNO: this.cardInfo_3004.CARDNO || '', // 卡号

                        };
                        console.log('this.cardInfo_3004.CARDNO', this.cardInfo_3004.CARDNO);
                        console.log('this.searchForm', this.searchForm);
                        console.log('3002data', result.body.appBody);
                        this.$store.commit('common/UPDATE_CUS_INFO', result.body.appBody);
                        this.getHomephone(result.body.appBody);
                        if (OPTIONS === 2) {
                            this.ifupdate3002 = true;
                            this.isShowBtm = true;
                            // this.$alert(result.sysHead.rspMsg, '提示', {
                            //     customClass: 'success', type: 'success',
                            // });
                            this.isShowClass1 = true;
                            this.resultdesc3002 = "客户基本资料修改成功！";
                        }
                    } else {
                        if (OPTIONS === 2) {
                            this.ifupdate3002 = true;
                            this.isShowClass1 = false;
                            this.resultdesc3002 = `客户基本资料修改失败, 错误代码：${result.sysHead.rspCd} ；错误信息：${result.sysHead.rspMsg} `;
                        }
                    }
                } else {
                    if (OPTIONS === 2) {
                        this.ifupdate3002 = true;
                        this.isShowClass1 = false;
                        this.resultdesc3002 = "客户基本资料修改失败，请求失败";
                    }
                }
            });
        },
        // 更新是否预留手机号校验标识
        getHomephone(BaseInfo3002) {
            const checAllDataItem = JSON.parse(JSON.stringify(this.checAllData));
            let homephone6 = BaseInfo3002.HOMEPHONE.trim();
            let mbphone11 = BaseInfo3002.MOBILEPHONE.trim();
            console.log("homephone6:" + homephone6 + ",mbphone11" + mbphone11);
            let reservflag = true;
            if (!(this.currentSessionObj.ani === '' || this.currentSessionObj.ani === undefined)) {
                let anis = this.currentSessionObj.ani.trim();
                if (anis.substring(anis.length - 6, anis.length) != homephone6 && anis.substring(anis.length - 11, anis.length) != mbphone11) {
                    reservflag = false;
                } else {
                    reservflag = true;
                }
            }
            checAllDataItem.check_reserve_mobile.falg = reservflag;
            //console.log('reservflag', reservflag);
            // console.log(`这里是修改了 预留手机号状态：名称为：${ checAllDataItem.check_reserve_mobile.label } 值为：${ checAllDataItem.check_reserve_mobile.falg } ：大对象为：`, checAllDataItem);
            this.$store.commit('common/SAVE_CHECK_DATA', checAllDataItem);

        },
        // //下拉选 方法初始赋值
        getCityInitSelectFun() {
            this.CITYAddRESSADD11 = this.getValueDataFunTwo('ADD11', 'ADD12');
            this.CITYAddRESSADD21 = this.getValueDataFunTwo('ADD21', 'ADD22');
        },
        // // 这个方法用来处理 数据 2级
        getValueDataFunTwo(valueName1, valueName2) {
            const parentObj = this.addRessAlls.filter(item => item.pro_name === this.formData[valueName1])
            console.log('输出选中项', parentObj,);
            if (parentObj.length > 0) {
                const optionSelect = parentObj[0].pro_cities;
                if (valueName1 === 'ADD11') {
                    this.CITYAddRESSADD12 = this.getValueDataFunThree(valueName2, optionSelect);
                } else {
                    this.CITYAddRESSADD22 = this.getValueDataFunThree(valueName2, optionSelect);
                }
                return optionSelect;
            }
            return;
        },
        // 这个方法用来处理 数据 3级
        getValueDataFunThree(valueName2, newArray) {
            const parentObj = newArray.filter(item => item.city_name === this.formData[valueName2])
            if (parentObj.length > 0) {
                return parentObj[0].city_areas;
            }
            return;
        },

        // 处理地址下拉选数据
        getCityAddress(obj, type) {
            console.log('obj', obj, '---type', type);
            switch (type) {
                case 1:
                    this.formData.ADD11 = obj.pro_name;
                    this.CITYAddRESSADD11 = obj.pro_cities;
                    this.formData.ADD12 = '';
                    this.formData.ADD13 = '';
                    break;
                case 2:
                    this.formData.ADD21 = obj.pro_name;
                    this.CITYAddRESSADD21 = obj.pro_cities;
                    this.formData.ADD22 = '';
                    this.formData.ADD23 = '';
                    break;

            }
            console.log('this.CITYAddRESS2', this.CITYAddRESS2);
        },
        // 处理地址的二级选框
        getCityAddressFun(obj, type) {
            console.log('obj', obj, '---type', type);
            switch (type) {
                case 1:
                    this.formData.ADD12 = obj.city_name;
                    this.CITYAddRESSADD12 = obj.city_areas;
                    this.formData.ADD13 = '';
                    break;
                case 2:
                    this.formData.ADD22 = obj.city_name;
                    this.CITYAddRESSADD22 = obj.city_areas;
                    this.formData.ADD23 = '';
                    break;
            }
        },

        // 点击客户地址修改
        cusAddressAmend() {
            this.$router.push({ path: '/customerInfomationChange/addressEdit' });
        },

        // 联系人查询及修改
        linkman() {
            this.$router.push({ path: '/businessSystem/allcontactInfochecked' });
        },
        //修改记录查询
        handleClickbtn() {
            this.MenuId = getBusinessMenuId('/businessSystem/accountCardDetaileQuery', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'accountCardDetaileQuery', path: '/businessSystem/accountCardDetaileQuery', params: { id: this.MenuId } });
        },

        // 预留问题修改
        reservationPromation() {
            this.centerDialogVisible = true;
            // this.$confirm('确定修改预留问题?', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
            //     this.OPTION3029 = 2;
            //     this.trans3029();
            // });
        },
        handerCardReissue() {
            this.$refs.model3029s.validate((valid) => {
                console.log('预留问题修改');
                if (valid) {
                    if (this.ifhasreserv) {
                        this.OPTION3029 = 3;
                    } else {
                        this.OPTION3029 = 2;
                    }
                    this.trans3029();
                }
            })
        },
        // 账单寄送方式
        sendTheBill() {
            this.$router.push({ path: '/operationDeals/BillDeliveryAddress' });
        },
        // 短信功能设置
        smsFunSet() {
            this.$router.push({ path: '/featureSet/smsFunctionSeting' });
        },
        // 人民币自扣设置
        RmbSeting() {
            this.$router.push({ path: '/outsideSystemForRepayment/rmbBindingRepayment' });
        },
        // 消费凭密功能设置
        consumptionFun() {
            this.$router.push({ path: '/featureSet/consumptionBysecret' });
        },
    },
};
</script>

<style  lang="scss" >
.customerInfoChange {
    .cardComponent {
        .el-card .el-card__body {
            padding: 0;
        }
    }
    .el-radio__label {
        color: #fff;
    }
    .el-radio__input.is-checked + .el-radio__label {
        color: #0f589e;
    }
    .el-card__header {
        background-color: #77b9f9;
    }
    .exclusiveStyle {
        .el-form-item__content .el-input__inner {
            width: 220px;
            min-width: 200px;
        }
    }
    .successMessage {
        line-height: 34px;
        text-align: center;
        margin-bottom: 20px;
        span.success_class {
            color: #fff;
            display: inline-block;
            padding: 2px 10px;
            background-color: #409eff;
            border: 1px solid #409eff;
            border-radius: 8px;
            font-size: 15px;
        }
        span.error_class {
            color: #fff;
            display: inline-block;
            padding: 2px 10px;
            background-color: #cd4435;
            border: 1px solid #cd4435;
            border-radius: 8px;
            font-size: 15px;
        }
    }
    .searchForm {
        .buttonBox {
            margin: 30px 0;
            text-align: center;
        }
    }
    .formContainer .searchForm {
        border: 1px solid #dcdfe6;
        border-radius: 5px;
    }

    .info .el-form-item {
        margin-bottom: 14px;
    }
    .addressForm {
        .addressInfo {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

            .box-card {
                width: 48%;
                margin-bottom: 5px;
                .el-card__body {
                    padding: 10px;
                }
            }
        }
    }
    .btnBox {
        text-align: center;
    }
}
</style>
